<template>
	<!-- 班主任课程表 -->
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view class="goback">
					<view @click="goBack" class="goicon" style="background:url(../../../static/goback.png);background-size:contain;background-repeat: no-repeat;">
					</view>
				</view>
				<view class="title">课程表</view>
				<view class="right">

				</view>
			</view>
			<view class="jianju"></view>
		</view>
		<!-- 页面内容 -->
		<view>
			<view class="data">{{year}}年{{month}}月</view>
			<view class="dataBox">
				<view class="classtable today" :class="bianseindex==index?'bianse':''" v-for="(item,index) in week" :key="index" @click="bianse(index,year,month,item.day); schedule()" >
					<view class="weekend" v-if="new Date().getDate() == item.day">今天
					<image src="../../static/img/checked.png" mode=""></image></view>
					<view class="weekend" v-else>{{item.week}}</view>
					<view class="day">{{item.day}}</view>
				</view>
			</view>
			<view class="timer">
				<text :class="timeBg==index?'curry1':''" v-for="(item,index) in time" :key="index" @click="timebianse(index,item)">{{item}}</text>
			</view>
			<!-- <view class="jianju"></view> -->

			<view class="kecheng" >
				<view class="kecheng-list">
					<view class="common" style="background: url(../../static/img/choose05.5ea5015.png); background-size: cover; background-repeat: no-repeat;" v-for="(item,index) in cosdata" :key="index">
						<text class="should">{{item.courseName}}</text>
						<text class="address">{{item.orgName}}</text>
						<text class="teacher">{{item.teacherName}}<text>(老师)</text></text>
						<text class="address-xiangqing">{{item.placeName}}</text>
					</view>
					<view class="common" style="background: url(../../static/img/choose04.8f8943d.png); background-size: cover; background-repeat: no-repeat;">
						<text class="should">春田花花培训</text>
						<text class="address">吉泰路小学</text>
						<text class="teacher">刘晓莉<text>(老师)</text></text>
						<text class="address-xiangqing">高新区吉泰路38号</text>
					</view>
					<!-- <view class="common" style="background: url(../../static/img/choose02.a5c4194.png); background-size: cover; background-repeat: no-repeat;">
						<text class="should">春田花花培训</text>
						<text class="address">吉泰路小学</text>
						<text class="teacher">刘晓莉<text>(老师)</text></text>
						<text class="address-xiangqing">高新区吉泰路38号</text>
					</view>
					<view class="common" style="background: url(../../static/img/choose01.5ea5015.png); background-size: cover; background-repeat: no-repeat;">
						<text class="should">春田花花培训</text>
						<text class="address">吉泰路小学</text>
						<text class="teacher">刘晓莉<text>(老师)</text></text>
						<text class="address-xiangqing">高新区吉泰路38号</text>
					</view>
					<view class="common" style="background: url(../../static/img/choose03.ee03d7e.png); background-size: cover; background-repeat: no-repeat;">
						<text class="should">春田花花培训</text>
						<text class="address">吉泰路小学</text>
						<text class="teacher">刘晓莉<text>(老师)</text></text>
						<text class="address-xiangqing">高新区吉泰路38号</text>
					</view> -->
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				//课程信息
				cosdata:null,
				//教师Id
				techerId:'',
				// 状态栏高度
				statusBarHeight:  0,
				// 导航栏高度
				navBarHeight: 82 + 11,
				bianseindex:-1,
				year: '',
				month: '',
				week:[], //存放当前时间对应的周
				//日期
				date:null,
				timeBg:-1,
				time:null, //存储后台返回的时间段
				timeduan:'', // 存储要向后台发送的时间段
			};
		},
		props: {

		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			this.techerId=uni.getStorageSync('techerId')
			console.log(this.techerId)
			this.getweek();
			this.settimes();
			this.todays();
			this.schedule();
		},
		methods: {
			//获取时段
			settimes(){
				this.techerId=uni.getStorageSync('techerId')
				this.$myRequest({
					url:'/teacher/period',
					data:{
						tNo:this.techerId,
						startTime:this.date
					},
					success:(res)=>{
						console.log(res.data.data)
						this.time=res.data.data
						
					}
				})
			},
			//查询教师某天的课程安排
			schedule(){
				this.$myRequest({
					url:'/headTeacher/findCourseByteacherNoUNION',
					data:{
						teacherNo:this.techerId,
						startTime: this.date,
						period:this.timeduan
					},
					success:(res)=>{
						console.log(res.data.data)
						this.cosdata=res.data.data
					}
				})
			},
			bianse(index,y,m,d){
				this.bianseindex = index;
				this.date=y+'-'+m+'-'+d;
				// console.log(this.date)
				this.settimes()
				
			},
			timebianse(index,val){
				this.timeBg = index;
				console.log(val)
				this.timeduan = val;
				
				// this.schedule()
			},
			goBack() {
				// 此处是写返回页面的方法、

				uni.navigateBack({
					delta: 1 //返回只上一级页面
				});
			},
			todays(){
				let nowData = new Date();
				let year=nowData.getFullYear();
				let month=nowData.getMonth()+1;
				let day=nowData.getDate();
				this.date = year+'-'+month+'-'+day;
			},
			getweek() {
				let arr = [];
				let json={};
				let nowData = new Date();
					this.year = nowData.getFullYear();
					this.month = nowData.getMonth()+1;
				    //获取今天的是周几
				    let currentDay = nowData.getDay();
				    //把currentDay == 0赋值给周日
				    if(currentDay == 0){
				        currentDay = 7
				    }
					for(var i=0; i<7;i++) {
						json = {}
						let dayTime = nowData.getTime() - (currentDay - (i+1)) * 24 * 60 * 60 * 1000;
						let day = new Date(dayTime).getDate()
						let week = '周' + '一二三四五六日'.charAt(i)
						json.week = week;
						json.day = day;
						arr.push(json);			
					}
					this.week = arr;
			}
			
		},
			
		}
	
</script>

<style lang="less" scoped>
	.navBarBox {}

	.navBarBox .statusBar {}

	.navBarBox .navBar {
		padding: 3rpx 50rpx;
		padding-bottom: 8rpx;
		display: flex;
		justify-content: space-between;

		line-height: 93rpx;
		font-size: 40rpx;
	}

	.goback {
		flex: 1;
		height: 100%;
	}

	.goicon {
		width: 30rpx;
		height: 30rpx;
		background-color: #00BEA9;
		margin-top: 30rpx;
	}

	.title {
		flex: 1;
		height: 100%;

	}

	.right {
		flex: 1;
	}
	.status_bar {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 128rpx;
		background-color: #ffffff;
	}

	.data {
		font-size: 40rpx;
		color: rgb(46, 46, 46);
		margin-left: 24rpx;
		margin-top: 30rpx;
	}

	.dataBox {
		display: flex;
		padding: 0 30rpx;
		justify-content: space-between;

		.classtable {
			text-align: center;
			// margin-top: 30rpx;
			width: 90rpx;
			border-radius: 8rpx;
			height: 150rpx;
			background: #efeded;
			overflow: hidden;
			position: relative;

			image {
				position: absolute;
				top: 0;
				left: 0;
				height: 0;
				width: 24rpx;
				height: 24rpx;
			}

			.weekend {
				font-size: 25rpx;
				margin-top: 30rpx;
			}

			.day {
				font-size: 34rpx;
				margin-top: 20rpx;
			}
		}

		.classtable.active {
			background: #007AFF;
		}

		.today {
			// margin-left: 30rpx;
		}
	}

	.timer {
		margin-top: 45rpx;
		display: flex;
		width: 690rpx;
		// flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		align-content: space-between;
		margin-bottom: 35rpx;
		padding: 0 30rpx;

		text {
			width: 342rpx;
			height: 56rpx;
			background-color: #e8f7ff;
			text-align: center;
			line-height: 56rpx;
			font-size: 26rpx;
			border-radius: 10rpx;
			color: #2db3fe;
			margin-bottom: 10rpx;
		}
		.curry1 {
			background: #2db3fe;
			color: #fff;
		}
	}

	.jianju {
		width: 750rpx;
		height: 20rpx;
		background: #fafafa;
	}

	.kecheng {
		padding: 36rpx 30rpx;
		background-color: #fafafa;
		.kecheng-list {
			width: 690rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		// .common:nth-child(n+3) {
		// 	margin-top: 10rpx;
		// }
	}
	.common {
		margin-bottom: 10rpx;
		width: 340rpx;
		height: 220rpx;
		
		background-size: 340rpx 220rpx;
		display: flex;
		flex-direction: column;
		color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,.1);
		text {
			margin-left: 28rpx;
		}
		.should {
			margin-top: 34rpx;
			font-size: 36rpx;
		}
		.address {	
			margin-top: 4rpx;
			font-size: 30rpx;
		}
		.teacher {
			font-size: 26rpx;
			text {
				margin-left: 0;
				font-size: 22rpx;
			}
		}
		.address-xiangqing {
			font-size: 22rpx;
		}
	}
	.bianse {
		background-color: #2db3fe !important;
	}
</style>